import { Component, createContext, useContext, useState } from 'react'; 
import Layout1 from '../layouts/Layout1.js';

// 可以使用 import { CounterContext1 } from './CounterContext1';
const CounterContext1 = createContext(null);

function ChildP() {
	const [count1, setCount1] = useState(11);
	const [count2, setCount2] = useState(66);
	return (
		<div>
			<CounterContext1.Provider value={{ count1, setCount1, count2, setCount2 }}>
			    {count1}:{count2}
			    <Child1></Child1>
			    <Child2></Child2>
			</CounterContext1.Provider>
		</div>
	);
}
function Child1() {
	const { count1, setCount1, count2, setCount2 } = useContext(CounterContext1);
	return (
		<div>
			<button onClick={() => {setCount1(count1 + 1);}}>按钮-11:{count1}</button>
			<button onClick={() => {setCount2(count2 - 1);}}>按钮-12:{count2}</button>
		</div>
	);
}
function Child2() {
	const { count1, setCount1, count2, setCount2 } = useContext(CounterContext1);
	return (
		<div>
			<button onClick={() => {setCount1(count1 + 1);}}>按钮-21:{count1}</button>
			<button onClick={() => {setCount2(count2 - 1);}}>按钮-22:{count2}</button>
		</div>
	);
}
// useContext
export default class HooksTest2 extends Component {
	// 总数据
	state = {
	}
	// 渲染函数
    render() {
    	return (
			<Layout1>
				<ChildP></ChildP>
			</Layout1>
		);
    }
};
